<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { createAdmin, deleteFile } from '@/plugins/login'
const user = reactive({
  username: '',
  password: '',
  icon: '',
  email: '',
  nickName: '',
  note: ''
})

let rules = reactive({
  username: [
    { required: true, message: '用户名必填' },
    { pattern: /^[a-zA-Z0-9_]{4,16}$/, min: 4, max: 16, message: '请输入正确的用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码必填' },
    { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/, min: 6, max: 16, message: '请输入正确的密码格式', trigger: 'blur' }
  ],
  icon: [{ required: true, message: '用户头像必需上传' }, { trigger: 'blur' }],
  email: [
    { required: true, message: '邮箱地址必填' },
    { pattern: /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/i, message: '请输入正确邮箱地址', trigger: 'blur' }
  ],
  nickName: [
    { required: true, message: '用户昵称必填' },
    { pattern: /^[a-zA-Z0-9_]{4,16}$/, message: '请输入正确的用户昵称', min: 4, max: 16, trigger: 'blur' }
  ],
  note: [
    { required: true, message: '用户备注必填' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{1,50}$/, max: 50, message: '请输入正确的用户备注', trigger: 'blur' }
  ]
})

const loading = ref(false)
// 上传地址
const uploadImageUrl = ref('http://localhost:8080/minio/upload')
// 上传的请求头
let headers = {}

// 上传成功
function handleAvatarSuccess(response) {
  if (response.code === 200) {
    user.icon = response.data.url
    ElMessage.success('上传成功')
  } else {
    ElMessage.error('上传失败')
  }
}

// 文件移除
function removeAvatarUpload(file) {
  deleteFile({
    objectName: file.name
  }).then(
    data => {
      if (data.code === 200) {
        ElMessage({
          showClose: true,
          message: '删除成功 请重新上传',
          type: 'success'
        })
      } else {
        ElMessage({
          showClose: true,
          message: data.message,
          type: 'error'
        })
      }
    },
    error => {
      console.log('错误', error.message)
    }
  )
}

// 上传失败
function errorAvatarUpload(response) {
  ElMessage({
    showClose: true,
    message: response.data.data.message,
    type: 'error'
  })
}

// 上传之前
function beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!(isJPG || isPNG)) {
    ElMessage({
      showClose: true,
      message: '上传头像图片只能是 JPG或者PNG 格式!',
      type: 'error'
    })
  }
  if (!isLt2M) {
    ElMessage({
      showClose: true,
      message: '上传头像图片大小不能超过 2MB!',
      type: 'error'
    })
  }
  return isJPG && isLt2M
}

function exceedAvatarUpload() {
  ElMessage.error('上传数量已经超过最大限制')
}

// 注册方法
function register(value) {
  createAdmin({
    username: value.username,
    password: value.password,
    icon: value.icon,
    email: value.email,
    nickName: value.nickName,
    note: value.note
  }).then(
    data => {
      if (data.code === 200) {
        console.log(data)
        ElMessage({
          showClose: true,
          message: '注册成功',
          type: 'success'
        })
      } else {
        ElMessage({
          showClose: true,
          message: data.message,
          type: 'error'
        })
      }
    },
    error => {
      console.log('错误', error.message)
    }
  )
}
</script>

<template>
  <div id="app">
    <div id="admin">
      <div class="pos" v-loading="loading">
        <h1 class="adminh1">用户注册</h1>
        <el-form ref="registerForm" :model="user" label-width="100px" :rules="rules">
          <el-form-item label="用户头像:" label-width="100px" prop="icon">
            <el-upload
              class="avatar-uploader"
              list-type="picture-card"
              :action="uploadImageUrl"
              :drag="true"
              name="file"
              :headers="headers"
              method="POST"
              :show-file-list="true"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-remove="removeAvatarUpload"
              :on-error="errorAvatarUpload"
              :limit="1"
              :on-exceed="exceedAvatarUpload"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" type="text" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="user.email" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickName">
            <el-input type="text" v-model="user.nickName" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <el-input type="text" v-model="user.note" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register(user)">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style>
* {
  padding: 0;
  margin: 0;
}

.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
#admin {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -200px;
  margin-left: -250px;
  width: 500px;
  height: 590px;
  background: #fff;
  border-radius: 10%;
  box-shadow: 8px 10px 10px rgb(177, 223, 242);
}
.adminh1 {
  margin: 20px 0;
  text-shadow: 10px 13px 3px rgb(207, 207, 207);
  text-align: center;
}
.pos {
  width: 450px;
  height: 350px;
  position: absolute;
  top: 25px;
  left: 25px;
}
</style>
